<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	</style>
</head>

<body>
	<canvas id="canvas" width="800" height="800"></canvas>


	<script>
		const canvas = document.getElementById('canvas')
		const ctx = canvas.getContext('2d')
		ctx.fillStyle = 'red'
		ctx.fillRect(0, 0, 50, 50)


		ctx.beginPath()

		ctx.lineWidth = 2
		ctx.strokeStyle = 'blue'
		ctx.moveTo(100, 100)
		ctx.lineTo(250, 75)
		ctx.stroke()
		ctx.lineWidth = 1
		ctx.lineTo(300, 100)
		ctx.stroke()

		ctx.beginPath()

		ctx.lineWidth = 2
		ctx.strokeStyle = 'green'
		ctx.fillStyle = 'red'
		ctx.arc(200, 200, 50, 0, 2 * Math.PI)
		ctx.stroke()
		ctx.fill()


	</script>
</body>

</html>
